<template>
	<view class="page">
		<view class="address-data">
			<view class="address-list">

				<view class="list">
					<button @click="switchTabs(1)">快递</button>
					<button @click="switchTabs(0)">自取</button>
				</view>

			</view>
			<view class="bar">

			</view>
		</view>
		<!-- 地址 -->
		<view class="address-data" v-if="dataInfo.isexpress == 1">
			<view class="address-list" @click="onSkip('address')">
				<view class="list">
					<text>黑龙江哈尔滨市道里区城区</text>
				</view>
				<view class="list">
					<text class="address">爱建路1333号</text>
				</view>
				<view class="list">
					<text>张三</text>
					<text>178****8888</text>
				</view>
			</view>
			<view class="bar">

			</view>
		</view>
		<view class="goods-data" v-else>
			<view class="delivery">
				<div class="list">
					<view class="title">姓名</view>
					<view class="content">
						<input v-model="dataInfo.name" type="text" placeholder="请输入姓名">
					</view>
				</div>

				<div class="list">
					<view class="title">电话</view>
					<view class="content">
						<input v-model="dataInfo.phone" type="text" placeholder="请输入电话">
					</view>
				</div>
			</view>
			<view class="address-data">
				<view class="bar"></view>
			</view>
		</view>

		<!-- 商品 -->
		<view class="goods-data">
			<view class="goods-title">
				<text>商品信息</text>
			</view>

			<view class="" v-for="(item,index) in goodsList" :key="index">
				<view class="goods-list">
					<view class="list">
						<view class="thumb">
							<image :src="item.img_list[0]"></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="name one-omit">{{item.title}}</text>
								<text class="attr" v-for="(el,index) in item.attribute" :key="index">{{el._key}} :
									{{el._value}} </text>
							</view>
							<view class="price-number">
								<view class="price">
									<text class="min">￥</text>
									<text class="max">{{item.real_price}}</text>
									<text class="min">.00</text>
								</view>
								<view class="number">
									<text>x {{item.num}}</text>
								</view>
							</view>
							<!-- <view class="tag">
								<text>支持七天无理由退货</text>
							</view> -->
						</view>
					</view>
				</view>
				<view class="delivery">
					<div class="list">

						<view class="title">快递费</view>
						<view class="content">
							<text v-if="item.express_fee">{{item.express_fee}}</text>
							<text v-else>免运费</text>

						</view>
					</div>

					<div class="list">
						<view class="title">订单备注</view>
						<view class="content">
							<input @input="(event) => valsInput(index, event)" :value="item.order_note" type="text"
								placeholder="请输入备注">
						</view>
					</div>
				</view>

			</view>


		</view>
		<!-- 订单金额 -->
		<view class="order-price">
			<view class="price-list">
				<view class="list">
					<view class="title">
						<text>商品金额</text>
					</view>
					<view class="price">
						<text>￥{{dataInfo.goodsprice}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>运费</text>
					</view>
					<view class="price">
						<text class="highlight">+￥{{dataInfo.express_fee}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>支付方式</text>
					</view>
					<view class="price">
						<text>在线支付</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>商品合计</text>
					</view>
					<view class="price">
						<text class="highlight">+￥{{dataInfo.goodsrealprice}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部合计提交 -->
		<view class="footer-submit">
			<view class="price">
				<text>合计：</text>
				<text class="min">￥</text>
				<text class="max">{{dataInfo.goodsrealprice}}</text>
				<text class="min">.00</text>
			</view>
			<view class="submit" @click="onSubmit">
				<text>提交订单</text>
			</view>
		</view>
		<!-- 发票 -->
		<invoice-info ref="InvoiceInfo"></invoice-info>
		<!-- 优惠券 -->
		<use-coupon ref="UseCoupon"></use-coupon>
	</view>
</template>

<script>
	import InvoiceInfo from '../../components/InvoiceInfo/InvoiceInfo.vue';
	import UseCoupon from '../../components/UseCoupon/UseCoupon.vue'
	import {
		orderConfim
	} from '@/config/api.js';
	export default {
		components: {
			// 发票
			InvoiceInfo,
			// 优惠券
			UseCoupon,
		},
		data() {
			const goodsInfo = uni.getStorageSync('oderGoodsInfo');

			return {
				dataInfo: {
					isexpress: 1,
					express_fee: 0,
					goodsprice: 0,
					goodsrealprice: 0,
					name: '',
					phone: '',
					user_address_id: 1, // 这里是收货地址Id 要动态改
				},

				scrollTop: 0,
				goodsList: [goodsInfo],


			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		mounted() {
			this.expressSum();

		},
		methods: {
			/**
			 * 提交订单
			 */
			switchTabs(n) {
				this.dataInfo.isexpress = n;
			},
			valsInput(index, event) {
				this.goodsList[index]['order_note'] = event.detail.value;
			},
			expressSum() {
				let num = 0,
					price = 0;
				this.goodsList.forEach(el => {
					num = ((num * 10000) + (el['express_fee'] * 10000)) / 10000  * el['num'];
					price = ((price * 10000) + (el['real_price'] * 10000)) / 10000 * el['num'];
				});
				this.dataInfo.express_fee = num;
				this.dataInfo.goodsprice = price;
				this.dataInfo.goodsrealprice = ((price * 10000) + (num * 10000)) / 10000;
			},
			onSubmit() {
				const sendate = {
					goodsList: [],
					...this.dataInfo
				};
				this.goodsList.forEach(el => {
					sendate['goodsList'].push({
						id: el.id,
						num: el.num,
						order_note: el.order_note
					})
				})
				sendate['goodsList'] = JSON.stringify(sendate['goodsList']);
				orderConfim(sendate).then(res => {
					uni.navigateTo({
						url: '/moduleD/MyOrderList/MyOrderList?type=2',
					})
				})

				// uni.redirectTo({
				// 	url: '/moduleB/CashierDesk/CashierDesk',
				// })
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'address':
						uni.navigateTo({
							url: '/moduleB/AddressList/AddressList',
						})
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'ConfirmOrder.scss';
</style>